<template>
    <div class="playerinformation">
		<el-form label-width="130px" class="searchform">
		  <el-form-item label="老人姓名:">
		    <el-input v-model="serchForm.name" clearable="true"  placeholder="请输入老人姓名"></el-input>
		  </el-form-item>
		  <!-- <el-form-item label="请假日期">
					<el-col :span="11">
					<el-form-item prop="date1">
						<el-date-picker type="date" placeholder="选择日期" v-model="serchForm.date" style="width: 200px;"></el-date-picker>
					</el-form-item>
					</el-col>
				</el-form-item> -->
        <el-form-item label="监护人联系方式：">
		    <el-input v-model="serchForm.phone" clearable="true" placeholder="请输入电话号码"></el-input>
		  </el-form-item>
		</el-form>
		<el-button type="primary" @click="search()">查询</el-button>
		<el-button type="primary" @click="dialogFormVisible = true">添加</el-button>

		<!-- 导入excel表格 -->
		<el-upload
			class="upload-demo"
			action="http://192.168.11.157:10000/oldman/uploadOldmanExcel"
			:on-change="handleChange"
			:on-exceed="handleExceed"
			:on-remove="handleRemove"
			:file-list="fileListUpload"
			:on-success="uploadSuccess"
			:limit="limitUpload"
			accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
			:auto-upload="true">
			<el-button size="small" type="primary">导入老人EXCEL表格</el-button>
			<div slot="tip" class="el-upload__tip">只 能 上 传 xlsx / xls 文 件</div>
		</el-upload>
		
		  <el-table
		    :data="tableData"
			stripe=""
		    border
			fit
		    style="width: 100%"
			:header-cell-style="{textAlign: 'center'}"
			:cell-style="{ textAlign: 'center' }">
			<el-table-column type="index" label="序号"></el-table-column>
			<el-table-column prop="id" label="记录编号" v-if="false"></el-table-column>
			<el-table-column prop="oldmanId" label="老人编号"></el-table-column>
            <el-table-column prop="oldmanName" label="老人姓名"></el-table-column>
            <el-table-column prop="birthDate" label="出生日期"></el-table-column>
		    <el-table-column prop="guardianName" label="监护人姓名"></el-table-column>
			<el-table-column prop="guardianPhone" label="监护人联系方式"></el-table-column>
			<el-table-column prop="type" label="老人状态"></el-table-column>
		    <el-table-column fixed="right" align="center" label="操作">
		      <template slot-scope="scope">
					<el-button type="text"  size="small" @click="showDetail(scope.row)">详细信息</el-button>
				</template>
		    </el-table-column>
		  </el-table>

		  <!-- 分页 -->
		  <div style="text-align:right;">
			  <el-pagination
			background
			hide-on-single-page
			layout="prev, pager, next"
			:current-page="pageNum"
			@current-change="changePageNum"
			:total="pages">
			</el-pagination>
		  </div>

		  <el-dialog title="添加记录" :visible.sync="dialogFormVisible" width="800px;">
			<template>
					<div class="zong">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="demo-ruleForm" style="height:800px">
					<el-row :gutter="20">
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="老人名字" prop="name">
									<el-input v-model="ruleForm.name" ></el-input>
								</el-form-item>
							</div>
						</el-col>
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="老人类型" prop="type" >
									<el-select v-model="ruleForm.region" placeholder="请选择老人类型">
									<el-option label="退伍军人" value="jun"></el-option>
									<el-option label="退休老人" value="xiu"></el-option>
									<el-option label="知名老者" value="zhi"></el-option>
									</el-select>
								</el-form-item>
							</div>
						</el-col>
					</el-row>
				
					<el-row :gutter="20">
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="老人编号" prop="id">
									<el-input v-model="ruleForm.id"></el-input>
								</el-form-item>
							</div>
						</el-col>
					
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="身份证号" prop="identity_code">
									<el-input v-model="ruleForm.identity_code"></el-input>
								</el-form-item>
							</div>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="老人性别" prop="sex">
									<el-select v-model="ruleForm.sex" placeholder="请选择老人性别">
										<el-option label="男" value="man"></el-option>
										<el-option label="女" value="woman"></el-option>
									</el-select>
								</el-form-item>
							</div>
						</el-col>
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="出生日期" required>
									<el-col :span="11">
									<el-form-item prop="date1">
										<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"></el-date-picker>
									</el-form-item>
									</el-col>
								</el-form-item>
							</div>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="民族" prop="nation		">
									<el-input v-model="ruleForm.nation		"></el-input>
								</el-form-item>
							</div>
						</el-col>
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="宗教信仰" prop="religious_belief	">
									<el-input v-model="ruleForm.religious_belief	"></el-input>
								</el-form-item>
							</div>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="联系方式" prop="phone		">
									<el-input v-model="ruleForm.phone		"></el-input>
								</el-form-item>	
							</div>
						</el-col>
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="籍贯" prop="native_place	">
									<el-input v-model="ruleForm.native_place	"></el-input>
								</el-form-item>
							</div>
						</el-col>
					</el-row>
					
					<el-row :gutter="20">
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="教育程度" prop="education_level	">
									<el-input v-model="ruleForm.education_level	"></el-input>
								</el-form-item>
							</div>
						</el-col>
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="婚姻状况" prop="marital_status	">
									<el-input v-model="ruleForm.marital_status	"></el-input>
								</el-form-item>
							</div>
						</el-col>
					</el-row>
					
					<el-row :gutter="20">
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="生活习惯" prop="living_habit		">
									<el-input v-model="ruleForm.living_habit		"></el-input>
								</el-form-item>
							</div>
						</el-col>
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="性格特点" prop="personality_traits		">
									<el-input v-model="ruleForm.personality_traits		"></el-input>
								</el-form-item>
							</div>
						</el-col>
					</el-row>
					
					<el-row :gutter="20">
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="个人爱好" prop="personal_hobby		">
									<el-input v-model="ruleForm.personal_hobby		"></el-input>
								</el-form-item>
							</div>
						</el-col>
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="饮食偏好" prop="diet_preference">
									<el-input v-model="ruleForm.diet_preference 	"></el-input>
								</el-form-item>
							</div>
						</el-col>
					</el-row>
					
					<el-row :gutter="20">
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="人生经历" prop="life_experience">
									<el-input type="textarea" v-model="ruleForm.life_experience		"></el-input>
								</el-form-item>
							</div>
						</el-col>
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="老人意愿" prop="elderly_wishes	">
									<el-input type="textarea" v-model="ruleForm.elderly_wishes	"></el-input>
								</el-form-item>
							</div>
						</el-col>
					</el-row>
			
					<el-row :gutter="20">
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="老人身份证" prop="sfz">
									<div style="margin:2em 6em;">
											<el-upload
												class="upload-demo"
												action="https://jsonplaceholder.typicode.com/posts/"
												:on-preview="handlePreview"
												:on-remove="handleRemove"
												:file-list="fileList"
												multiple="true"
												list-type="picture">
												<el-button size="small" type="primary">点击上传</el-button>
												<div slot="tip" class="el-upload__tip" style="width:250px">只能上传jpg/png文件，且不超过500kb</div>
											</el-upload>
									</div>
								</el-form-item>
							</div>
						</el-col>
						<el-col :span="10">
							<div class="grid-content bg-purple">
								<el-form-item label="老人健康证" prop="elderly_health">
									<div style="margin:2em 6em;">
										<el-upload
											class="upload-demo"
											action="https://jsonplaceholder.typicode.com/posts/"
											:on-preview="handlePreview"
											:on-remove="handleRemove"
											:file-list="fileList"
											list-type="picture">
											<el-button size="small" type="primary">点击上传</el-button>
											<div slot="tip" class="el-upload__tip" style="width:250px">只能上传jpg/png文件，且不超过500kb</div>
										</el-upload>
									</div>
								</el-form-item>
							</div>
						</el-col>
					</el-row>

					<el-row :gutter="20">
  						<el-col  :span="10">
							<el-form-item>
								<el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
							</el-form-item>
						</el-col>
						<el-col  :span="10">
							<el-form-item>
								<el-button @click="resetForm('ruleForm')">重置</el-button>
							</el-form-item>
						</el-col>
					</el-row>
			</el-form>
				</div>
				
			</template>
		</el-dialog>

		<el-dialog title="详细信息" :visible.sync="dialogVisible2" width="1200px">
				<template>
						<div class="zong">
								<el-avatar :size="120" shape="square" src="https://empty" @error="errorHandler">
									<img :src="oldmanPhoto"/>
								</el-avatar>
								<el-row>
								<el-col :span="6"><div class="grid-content bg-purple">老人姓名：{{oldmaninfo[0]}}</div></el-col>
								<el-col :span="6"><div class="grid-content bg-purple-light">老人类型：{{oldmaninfo[1]}}</div></el-col>
								<el-col :span="6"><div class="grid-content bg-purple">老人编号：{{oldmaninfo[2]}}</div></el-col>
								</el-row>
								<el-row>
								<el-col :span="6"><div class="grid-content bg-purple">身份证号：{{oldmaninfo[3]}}</div></el-col>
								<el-col :span="6"><div class="grid-content bg-purple-light">房间号：{{oldmaninfo[4]}}</div></el-col>
								<el-col :span="6"><div class="grid-content bg-purple">出生日期：{{oldmaninfo[5]}}</div></el-col>
								</el-row>

								<el-row>
								<el-col :span="6"><div class="grid-content bg-purple">民族：{{oldmaninfo[6]}}</div></el-col>
								<el-col :span="6"><div class="grid-content bg-purple-light">宗教信仰：{{oldmaninfo[7]}}</div></el-col>
								<el-col :span="6"><div class="grid-content bg-purple">联系电话：{{oldmaninfo[8]}}</div></el-col>
								</el-row>
								<el-row>
								<el-col :span="8"><div class="grid-content bg-purple">籍贯：{{oldmaninfo[9]}}</div></el-col>
								<el-col :span="8"><div class="grid-content bg-purple-light">教育程度：{{oldmaninfo[10]}}</div></el-col>
								<el-col :span="8"><div class="grid-content bg-purple">婚姻状况：{{oldmaninfo[11]}}</div></el-col>
								</el-row>
								<el-row>
								<el-col :span="6"><div class="grid-content bg-purple">个人爱好：{{oldmaninfo[12]}}</div></el-col>
								<el-col :span="6"><div class="grid-content bg-purple-light">生活习惯：{{oldmaninfo[13]}}</div></el-col>
								<el-col :span="6"><div class="grid-content bg-purple">性格特点：{{oldmaninfo[14]}}</div></el-col>
								<el-col :span="6"><div class="grid-content bg-purple-light">饮食偏好：{{oldmaninfo[15]}}</div></el-col>
								</el-row>
								<el-row>
								<el-col :span="24"><div class="grid-content bg-purple-dark">人生经历：{{oldmaninfo[16]}}</div></el-col>
								</el-row>
								<el-row>
								<el-col :span="24"><div class="grid-content bg-purple-dark">老人意愿：{{oldmaninfo[17]}}</div></el-col>
								</el-row>
								<el-row>
								<el-col :span="6"><div class="grid-content bg-purple">老人身份证：</div></el-col>
								</el-row>
								
									<img v-for="(item,index) in idcardPhoto" :src="item" :key="index" alt="" class="idcardPhoto"/>
								
									
								<el-row>
								<el-col :span="6"><div class="grid-content bg-purple">健康报告扫描件：</div></el-col>
								</el-row>
								<img v-for="(item,index) in healthPhoto" :src="item" :key="index" alt="" class="healthPhoto"/>
							</div>
						</template>
		</el-dialog>
	</div>
</template>
<script>
import axios from 'axios'
import { Message } from 'element-ui';
    export default{
		name:"LeaveList",
		data(){
			return{
				// 当前的总页数，需要我们算出来的页数*10
				pages:1000,
				// 当前页。
				currentPage : 1,
				//每页的数量。
				pageSize : 5,
				oldmanPhoto : '',
				healthPhoto : [],
				idcardPhoto : [],
				 ruleForm: {
					id		:'',
          			name: '',
					type				:'',
					identity_code			:'',
					sex				:'',
					birthday				:'',
					nation				:'',
					religious_belief			:'',
					phone				:'',
					native_place			:'',
					education_level			:'',
					marital_status			:'',
					living_habit			:'',
					personality_traits			:'',
          personal_hobby	: '',
          diet_preference : '',
          life_experience	: '',
          elderly_wishes	:'',
          identity_photo	: '',
          health_report_photo	: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
		},
		//老人详细信息
		oldmaninfo:[],
		//修改的表单
		editForm: {
				id: '',
				requestDate: '',
				requestReason: '',
				requestDay: '',
				backDate:''
        },ruleForm: {
				positionId: '',
				date1: '',
				date2:'',
				requestReason: '',
				requestDay: ''
        },
        rules: {
          requestReason: [
            { required: true, message: '请输入请假原因', trigger: 'blur' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择请假日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择返工日期', trigger: 'change' }
          ],
          positionId: [
            { required: true, message: '请输入职工编号', trigger: 'blur' }
          ],
          requestDay: [
            { required: true, message: '请输入请假时长', trigger: 'blur' }
          ]
        },
				options: [{
				value: '选项1',
				label: '监护人员'
				}, {
				value: '选项2',
				label: '护理人员'
				}, {
				value: '选项3',
				label: '管理人员'
				}],
				value:"",
				// 搜索的条件
				serchForm:{
					name:'',
					phone: ''
				},
				//表中的信息
				 tableData: [],
				//弹出添加表单
				dialogFormVisible: false,
				addForm: {
				positionId: '',
				requestDate: '',
				requestReason: '',
				requestDay: ''
				},
				formLabelWidth: '120px',
				//弹出表单结束
				dialogVisible1: false,
				dialogVisible2: false,
			}
		},
		mounted : function(){
			this.search();
		},
		methods:{
			 submitForm(formName) {
        		this.$refs[formName].validate((valid) => {
          		if (valid) {
            		alert('submit!');
          		} else {
            		console.log('error submit!!');
            		return false;
          		}
        	});

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
			//查看
			handleClick(row) {
				console.log(row);
				this.dialogVisible1 = true
			},
			// 点击分页数字后的事件。
			changePageNum : function(currentPage){
				this.currentPage = currentPage;
				this.search();
			},
			// 查询表格中的数据。
			search : function(){
				var urls = this.$global.zuulIp+'/oldman/findOldmanPage';
				this.$axios.get(urls,{params : {
					pages : this.currentPage,
					pageSize : this.pageSize,
					name : this.serchForm.name,
					phone : this.serchForm.phone
				}}).then(res => {
					console.log(res.data)
					//执行后，限制为空，
					this.tableData = [];
					// 设置相应的分页数据
					this.pages = res.data.pages * 10;
					this.cur = res.data.pageNum;
					this.pageSize = res.data.pageSize;
					//遍历数据.
					for(var i = 0 ; i < res.data.list.length ; i ++){
						var data = res.data.list[i];
						
						var list = {
							 id : data.id,
							oldmanId : data.id,
							oldmanName : data.name,
							birthDate :  data.birthday,
							guardianName : data.guardian.name,
							guardianPhone : data.guardian.phone,
							type : data.state == 0 ? '在院' : '离院'
						};
						this.tableData.push(list);
					}
				})
			},
			handleChange(){
			},

			handleClose(done) {
				// this.$confirm('确认关闭？')
				// .then(_ => {
				// 	done();
				// })
				// .catch(_ => {});
				this.dialogVisible1 = false
			},
			errorHandler(){

			},
			limitUpload(){

			},
			fileListUpload(){

			},
			handleRemove(){

			},
			handleExceed(){

			},
			errorHandler(){

			},
			uploadSuccess(response, file, fileList){
				if(response){
					Message.success('文件上传成功');
					this.search();
				}
			},
			//删除
			del(row){
				confirm('是否删除'+row.id)
			},
			//查看原因
			reason(row){
				confirm('是否删除'+row.id)
			},
			//修改
			showDetail(row){
				this.selectOldmnaDetails(row.oldmanId);
				console.log(row)
			},
			selectOldmnaDetails : function (param) {
				this.dialogVisible2 = true;
				this.urls = this.$global.zuulIp+'/oldman/findOldmanDetailsById'
				this.$axios.get(this.urls,{params : {
					id : param
				}}).then(res => {
					console.log(res.data);
					var data = res.data;

					this.oldmanPhoto = data.elderlyPhoto;

					
					this.healthPhoto = [];
					var list = data.healthReportPhoto.split(';');
					for(var i = 0 ; i < list.length ; i ++){
						if(list[i].length > 0){
							this.healthPhoto.push(list[i]);
						}
					}

					this.idcardPhoto = [];
					var idList = data.identityPhoto.split(';');
					for(var i = 0 ; i < idList.length ; i ++){
						if(idList[i].length > 0){
							this.idcardPhoto.push(idList[i]);
						}
					}
					console.log(this.identityPhoto);
					console.log(this.healthPhoto);

					this.oldmaninfo.push(data.name);
					this.oldmaninfo.push(data.type);
					this.oldmaninfo.push(data.id);
					this.oldmaninfo.push(data.identityCode);
					this.oldmaninfo.push(data.roomId);
					this.oldmaninfo.push(data.birthday);
					this.oldmaninfo.push(data.nation);
					this.oldmaninfo.push(data.religiousBelief);
					this.oldmaninfo.push(data.phone);
					this.oldmaninfo.push(data.nativePlace);
					this.oldmaninfo.push(data.educationLevel);
					this.oldmaninfo.push(data.maritalStatus == 0 ? '已婚' : '未婚');
					this.oldmaninfo.push(data.personalHobby);
					this.oldmaninfo.push(data.livingHabit);
					this.oldmaninfo.push(data.personalityTraits);
					this.oldmaninfo.push(data.dietPreference);
					this.oldmaninfo.push(data.lifeExperience);
					this.oldmaninfo.push(data.elderlyWishes);
				})
			},
			submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
		}
	}
</script>

<style>
    .searchform{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
	
	.el-row {
		margin-bottom: 20px;
			height: 30px;
	}
	.el-col {
		border-radius: 4px;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
	.bg-purple {
		background: #d3dce6;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
			line-height: 36px;
		margin-right: 5px;
		padding-left: 5px;
	}
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
		.el-avatar--square {
		float: right;
			margin-right: 40px;
		border: none;

	}
		.el-avatar--square img{
			height: 100%;
			width: 100%;
		}
		.upload-demo{
			display: inline-block;
			width: 200px;
			float: right;
		}
		.idcardPhoto{
			width: 150px;
		}
		.healthPhoto{
			width: 200px;
		}
</style>